<template>
    <div class="container scopClass">
        <h3>赋码管理</h3>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- <el-tab-pane label="赋码管理ཨང་སྤྲོད་དོ་དམ་ " name="赋码管理"> -->
				 <el-tab-pane label="赋码管理 " name="赋码管理">
                <el-row style="margin:20px 0;">
                    <el-col :span="7">
                        <el-input style="border-radius: 0 5px 5px 0;width:300px;" placeholder="请输入关键词"  v-model="searchName1">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                            <el-button slot="append" @click="handleSearch1" style="background-color: #1BC46D;color: #fff;">搜索</el-button>
                        </el-input>
                    </el-col>
                </el-row>
                <el-table
                    :data="tableData"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
					:header-cell-style="{ background:'rgba(64, 158, 255, 0.05)'}"
                >
                    <!-- <el-table-column prop="productName" sortable label="产品名称ཐོན་རྫས་ཀྱི་མིང་ "></el-table-column>
                    <el-table-column prop="batch" sortable label="批号ཆོག་མཆན་ཨང་གྲངས། "></el-table-column>
                    <el-table-column prop="grade" sortable label="品级རིམ་པ་ "></el-table-column>
                    <el-table-column prop="spec" sortable label="规格ཚད་གཞི་ " width="100">
						<template slot-scope="scope">
							{{scope.row.spec}}{{scope.row.specUnits}}
						</template>
					</el-table-column>
					<el-table-column prop="totalNumber" sortable label="总码量སྤྱིའི་ཨང་ཚད། " width="180">
						<template slot-scope="scope">
							{{scope.row.totalNumber}}
						</template>
					</el-table-column>
					<el-table-column prop="activationSum" sortable label="打码量ཨང་རྟགས། " width="180"></el-table-column>
					<el-table-column prop="branchPackageNum" sortable label="分包数ཆ་བགོས་སྒྲུབ་འགན་ལེན་གྲངས་ " width="180"></el-table-column> -->
					   <el-table-column prop="productName" sortable label="产品名称"></el-table-column>
                    <el-table-column prop="batch" sortable label="批号"></el-table-column>
                    <el-table-column prop="grade" sortable label="品级"></el-table-column>
                    <el-table-column prop="spec" sortable label="规格" width="100">
						<template slot-scope="scope">
							{{scope.row.spec}}{{scope.row.specUnits}}
						</template>
					</el-table-column>
					<el-table-column prop="totalNumber" sortable label="总码量" width="180">
						<template slot-scope="scope">
							{{scope.row.totalNumber}}
						</template>
					</el-table-column>
					<el-table-column prop="activationSum" sortable label="打码量" width="180"></el-table-column>
					<el-table-column prop="branchPackageNum" sortable label="分包数" width="180"></el-table-column>
					<el-table-column label="操作" width="240" align="center">
                        <!-- <template slot-scope="scope">
                            <el-button
                                v-if="!printing"
                                type="text"

                                @click="handleEdit(scope.$index, scope.row)"
                            >打印པར་རྒྱག </el-button>
                            <el-button
                                v-if="!activation"
                                type="text"

                                @click="handleactivate(scope.$index, scope.row)"
                            >空码激活ཨང་སྟོང་གྲུང་སྐུལ་ </el-button>
							<el-button
                                v-if="!download"
							    type="text"
							    @click="handleDownload(scope.$index, scope.row)"
							>下载ཕབ་འཇུག</el-button>
							<el-button
                                v-if="!qualified"
							    type="text"
							    @click="handleCertification(scope.$index, scope.row)"
							>合格证ཚད་མཐུན་ལག་ཁྱེར་ </el-button>
                        </template> -->
						   <template slot-scope="scope">
                            <el-button
                                v-if="!printing"
                                type="text"

                                @click="handleEdit(scope.$index, scope.row)"
                            >打印</el-button>
                            <el-button
                                v-if="!activation"
                                type="text"

                                @click="handleactivate(scope.$index, scope.row)"
                            >空码激活</el-button>
							<el-button
                                v-if="!download"
							    type="text"
							    @click="handleDownload(scope.$index, scope.row)"
							>下载</el-button>
							<el-button
                                v-if="!qualified"
							    type="text"
							    @click="handleCertification(scope.$index, scope.row)"
							>合格证</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize1" @current-change="handleCurrentChange1" :total="total1" :current-page.sync="currentPage1" style="margin-top:20px"></el-pagination>
            </el-tab-pane>
            <!-- <el-tab-pane label="空码管理ཨང་སྟོང་དོ་དམ་ " name="空码管理"> -->
				  <el-tab-pane label="空码管理" name="空码管理">
                <el-row style="margin:20px 0;">

					<!-- <el-button type="primary"  style="float:right; margin-right: 10px" @click="apply">申请溯源码ཁཁུངས་འདེད་རེ་ཞུའི་ཨང་རྟགས།  </el-button> -->
					<el-button type="primary"  style="float:right; margin-right: 10px" @click="apply">申请溯源码</el-button>
                </el-row>
                <el-table
                    :data="tableData1"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                   <!-- <el-table-column prop="boxNum" sortable label="追溯码数量ཁུངས་འདེད་ཨང་གི་གྲངས་འབོར་ "></el-table-column>
                   <el-table-column prop="createtime" sortable label="申请时间རེ་ཞུའི་དུས་ཚོད། "></el-table-column>
                   <el-table-column prop="downloaded" sortable label="状态རྣམ་པ་ "> -->
					 <el-table-column prop="boxNum" sortable label="追溯码数量 "></el-table-column>
                   <el-table-column prop="createtime" sortable label="申请时间"></el-table-column>
                   <el-table-column prop="downloaded" sortable label="状态">
					   <template slot-scope="scope">
						   <div v-if="!scope.row.downloaded" >
							  <div style="height:10px;width:10px;border-radius:10px;background:red;display:inline-block;"></div> 未下载
						   </div>
						   <div v-if="scope.row.downloaded">
							  <div style="height:10px;width:10px;border-radius:10px;background:green;display:inline-block;"></div> 已下载
						   </div>
					   </template>
				   </el-table-column>
                   <el-table-column prop="materialCode" sortable label="操作">
					   <!-- <template slot-scope="scope">
						   <el-button v-if="!scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">下载追溯码ཁུངས་འདེད་ཨང་གྲངས་ཕབ་ལེན་བྱེད། </el-button>
						   <el-button v-if="scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">再次下载追溯码ཁུངས་འདེད་ཨང་གྲངས་ཕབ་ལེན་བྱེད། </el-button>
					   </template> -->
					    <template slot-scope="scope">
						   <el-button v-if="!scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">下载追溯码</el-button>
						   <el-button v-if="scope.row.downloaded"  type="text" style="color:#0076FF;" @click="downloadSpacebox(scope.$index, scope.row)">再次下载追溯码</el-button>
					   </template>
				   </el-table-column>

                </el-table>
                <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize2" @current-change="handleCurrentChange2" :total="total2" :current-page.sync="currentPage2" style="margin-top:20px"></el-pagination>
            </el-tab-pane>

            <el-dialog title="申请追溯码" customClass="customWidth" :visible.sync="dialogFormVisible">
            	<!-- <el-form :model="form" label-width="120px">
            		<el-form-item label="追溯码数量ཁུངས་འདེད་ཨང་གི་གྲངས་འབོར་ ">
            			<el-input placeholder="请输入内容"  v-model="boxNum" style="width:200px"></el-input>
            		</el-form-item>
            		<el-form-item label="批次号ཁག་གྲངས་ཨང་རྟགས། ">
            			<el-input placeholder="请输入内容"  v-model="subpackageBatch" style="width:200px"></el-input>
            		</el-form-item>
            	</el-form> -->
				<el-form :model="form" label-width="120px">
            		<el-form-item label="追溯码数量">
            			<el-input placeholder="请输入内容"  v-model="boxNum" style="width:200px"></el-input>
            		</el-form-item>
            		<el-form-item label="批次号">
            			<el-input placeholder="请输入内容"  v-model="subpackageBatch" style="width:200px"></el-input>
            		</el-form-item>
            	</el-form>
            	<div slot="footer" class="dialog-footer">
            		<el-button @click="close">取 消</el-button>
            		<el-button type="primary" @click="save">确 定</el-button>
            	</div>
            </el-dialog>
        </el-tabs>
    </div>
</template>

<script>
	import { sub_findByList,sub_findPrintMsg,sub_offLinePrint,sub_page_spacebox,sub_apply_spacebox,sub_spacebox_download,company_findById } from "@/request/api";
	import { saveAs } from "file-saver"
    export default {
        data() {
            return {
				form:{},
				tableData1:[],
				dialogFormVisible:false,
                activeName: '赋码管理',
                searchName1: '',
                searchName2: '',
                tableData: [],
                total1: 0,
                currentPage1:1,
                pagesize1:10,
                total2: 0,
                currentPage2:1,
                pagesize2:10,
                pagesize4:10,
                listUrl: '',
                action: '',
                added:true,
                printing:true,
                activation:true,
                download:true,
                qualified:true,
                preview:true,
				boxNum:'',
				subpackageBatch:'',
				batch:''
            };
        },
        created(){

        },
        mounted(){
           this.init1();
           this.judgmentAuthority();
		   this.init2()
		   var d = new Date();
			var curr_date = d.getDate();
			var curr_month = d.getMonth() + 1;
			var curr_year = d.getFullYear();
			String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
			String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
			var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
			// this.ruleForm.batch = yyyyMMdd + Math.ceil(Math.random()*10000);
			// this.batch = this.ruleForm.batch
			this.subpackageBatch = yyyyMMdd + Math.ceil(Math.random()*10000);
        },
        destroyed: function () {
            // this.$store.commit("setStorName","")
        },
        methods: {
			handleactivate(index,row){
				this.$router.push({
					path:'/tagging/activate',
					query:{list:row}
				})
			},
			downloadSpacebox(index,row){
				sub_spacebox_download(`${row.id}/${row.subpackageBatch}`).then((res)=>{
					var content = res;
					var filename = "追溯码.txt";
					var blob = new Blob([content], {
						type: "text/plain;charset=utf-8"
					});
					saveAs(blob, filename)
					this.init1()
					this.init2()
				})
			},
			apply(){
				this.dialogFormVisible =true
			},
			close(){
				this.dialogFormVisible = false
			},
			save(){
				if(this.boxNum == ""){
					this.$notify({
					    title: '提示',
					    message: '追溯码数量不能为空',
					    type: 'info',
					    duration:1000
					});
				}else{
					let data = {
						boxNum:this.boxNum,
						subpackageBatch: this.subpackageBatch
					}
					sub_apply_spacebox(data).then((res)=>{
						this.$notify({
						    title: '提示',
						    message: '申请成功',
						    type: 'success',
						    duration:1000
						});
						this.init2()
					})
					this.dialogFormVisible = false
				}
			},
			init2(){
				let data = {
					pagesize:10,
					pageno:this.currentPage2
				}
				sub_page_spacebox(data).then((res)=>{
					this.tableData1 = res.rows
					this.total2 = res.total
				})
			},
			handleCertification(index,row){
				this.$router.push({
					path:'/tagging/certification',
					query:{id:row.id}
				})
			},
			handleDownload(index,row){
				var userInfo = JSON.parse(localStorage.getItem("userInfo"))
				var s= userInfo.userInfo
				console.log(s)
				var id = localStorage.getItem("companyId")
				var company = {}
				company_findById(id).then((res)=>{
					company = res.data
				})
				var d = new Date();
				var curr_date = d.getDate();
				var curr_month = d.getMonth() + 1;
				var curr_year = d.getFullYear();
				String(curr_month).length < 2 ? (curr_month = "0" + curr_month): curr_month;
				String(curr_date).length < 2 ? (curr_date = "0" + curr_date): curr_date;
				var yyyyMMdd = curr_year + "" + curr_month +""+ curr_date;
				this.batch = yyyyMMdd + Math.ceil(Math.random()*10000);

				sub_findPrintMsg(row.id).then((res)=>{
					let data = {
						"品名":res.data.productName,
						"批号":res.data.batch,
						"净含量":res.data.spec + res.data.specUnits,
						"生产企业":company.abbreviation,
						"产地":company.address,
						"生产日期":row.createtime
					}
					var content="{"
					for(var key in data){
						content+="\""+key+"\":"+"\""+data[key]+"\",";
					}
					content = content.substring(0,content.length-1)+"}";
					let list = {
						subpackageId:row.id,
						content:content,
						num:row.subNumber,
						type:"分包打印",
						batch:this.batch
					}
					sub_offLinePrint(list).then((res)=>{
						var content = res;
						var filename = "追溯码.txt";
						var blob = new Blob([content], {
							type: "text/plain;charset=utf-8"
						});
						saveAs(blob, filename)
						this.init1()
					})

				})
			},
            // 调用接口
            init1(){
				let data = {
					page:this.currentPage1,
					productName:this.searchName1,
					source:'生产分包'
				}
				sub_findByList(data).then((res)=>{
					this.tableData = res.rows
					this.total1 = res.total

				})
		    },
            // tabs
            handleClick(tab, event) {

            },
            //
            handleEdit(index,row){
              // console.log(row.id)
              // window.location = "'ssqyprint://2/https://bbgy.cpzsyun.com:82/api/plant/box/print/' + row.id + ',https://bbgy.cpzsyun.com:82/api/scan/index.html?code'"
              window.location.href = 'ssqyprint://2/https://bbgy.cpzsyun.com:82/api/plant/box/print/' +row.id + ',https://bbgy.cpzsyun.com:82/api/scan/index.html?code'
            },
            // 查看
            handleView(index,row){

            },

            // 列表搜索
            handleSearch1() {
                this.currentPage1 = 1
                this.init1()
            },
            handleSearch2() {
                this.currentPage2 = 1
                this.init2()
            },

            // 分页事件
            handleCurrentChange1(val){
                this.currentPage1 = val
                this.init1()
            },
            handleCurrentChange2(val){
                this.currentPage2 = val
                this.init2()
            },

            //判定操作按钮显示
            judgmentAuthority(){
                var type = JSON.parse(localStorage.getItem("panduanzhuangtai"))
                type.map(item1 => {
                    if(item1.name == '赋码管理' && item1.children != null){
                        for(var i = 0; i < item1.children.length; i++){
                            if(item1.children[i].name == '打印') this.printing = false;
                            if(item1.children[i].name == '空码激活') this.activation = false;
                            if(item1.children[i].name == '下载') this.download = false;
                            if(item1.children[i].name == '合格证') this.qualified = false;
                            if(item1.children[i].name == '预览') this.preview = false;
                        }
                    }
                })
            }


        }
    }
</script>

<style lang="less" scoped>
// 深度作用器
/deep/.upload-daoru{
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.customWidth{
		width:30%;
	}
.el-col{
    margin-bottom: 0;
}
/* .scopClass .el-table{ margin-top: 20px;} */
 .el-pagination{
    text-align: center;
}
/*
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    border-right: none;
} */
</style>
